<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <el-dialog :visible.sync="show" :fullscreen="false" :destroy-on-close="true" width="500px" v-loading="loading"
        title="编辑导航按钮">
        <el-form label-width="120px" label-position="right" v-if="nav">
            <el-form-item label="按钮图标" required>
                <image-picker v-model="nav.icon"></image-picker>
            </el-form-item>

            <el-form-item label="图标大小" required>
                <el-input style="width: 200px" maxlength="3" minlength="2" type="number" placeholder="40~100"
                    v-model="nav.size"></el-input>
            </el-form-item>

            <el-form-item label="文字" required>
                <el-input style="width: 200px" maxlength="20" v-model="nav.name" placeholder></el-input>
            </el-form-item>

            <el-form-item label="跳转" required>
                <link-editor v-model="linkData"></link-editor>
            </el-form-item>

            <el-form-item label="显示状态">
                <el-switch style="width: 200px" active-text="显示" inactive-text="隐藏" v-model="nav.public"></el-switch>
            </el-form-item>

            <el-form-item label="排序">
                <el-input style="width: 200px" type="number" v-model="nav.number" placeholder="由小到大"></el-input>
            </el-form-item>

            <el-form-item label="显示位置">
                <position-selector cat="nav" v-model="nav.position_id"></position-selector>
            </el-form-item>

            <el-form-item label="高级设置">
                <el-checkbox v-model="showMore"></el-checkbox>
            </el-form-item>

            <template v-if="showMore">
                <el-form-item label="文字颜色">
                    <el-color-picker placeholder="导航文字，最多4个汉字" v-model="nav.color"
                        :predefine="predefineColors"></el-color-picker>
                </el-form-item>

                <el-form-item label="图标中间文字">
                    <el-input
                        style="width: 200px"
                        maxlength="10"
                        v-model="nav.inner_text"
                        v-if="!nav.dynamic_inner_text"
                    ></el-input>
                    <el-checkbox style="margin-left: 10px" v-model="nav.dynamic_inner_text"
                        >动态获取</el-checkbox>
                </el-form-item>

                <el-form-item label="图标右上角文字">
                    <el-input style="width: 200px" maxlength="5" placeholder="最多5个汉字" v-model="nav.badge_text"></el-input>
                </el-form-item>
            </template>


        </el-form>
        <div slot="footer">
            <el-button size="mini" @click="cancleHandle" icon="el-icon-close">取消</el-button>
            <el-button size="mini" type="primary" @click="submitHandle" icon="el-icon-check">确定</el-button>
        </div>

    </el-dialog>
</template>

<script>
import LinkEditor from "@/components/LinkEditor";
import ImagePicker from "@/components/ImagePicker";
import PositionSelector from "@/components/PositionSelector";
import { updateNav, deleteNav } from "@/api/nav";
export default {
    components: { LinkEditor, ImagePicker, PositionSelector },
    data () {
        return {
            show: false,
            showMore: false,
            nav: null,
            predefineColors: ["#333333", "#666666", "#000000", "#1989fa", "#ff0000", "#00ff00"],
            loading: false,
        };
    },

    mounted: function () { },

    computed: {
        linkData: {
            get () {
                var data = {};
                try {
                    var data = JSON.parse(this.nav.link);
                } catch (error) {
                    console.log(error);
                }
                return data;
            },
            set (val) {
                this.nav.link = JSON.stringify(val);
            },
        },
    },

    methods: {
        openDialog: function (nav) {
            // TODO
            this.show = true
            this.nav = nav
        },

        closeDialog: function () {
            this.show = false
            this.nav = {}
        },

        validate: function (nav) {
            if (!nav.icon) {
                this.$message.error("图标图片不能为空");
                return false;
            }

            if (!nav.name) {
                this.$message.error("图标文字不能为空");
                return false;
            }

            if (!nav.link) {
                this.$message.error("图标跳转不能为空");
                return false;
            }

            if (nav.size <= 40 || nav.size > 100) {
                this.$message.error("图标尺寸不和规范");
                return false;
            }

            if (!nav.position_id) {
                this.$message.error("图片所属页面不能为空");
                return false;
            }

            return true;
        },

        submitHandle: function () {
            var data = this.nav;
            // validate
            var isok = this.validate(data);
            if (!isok) {
                return false;
            }

            this.loading = true;
            updateNav(data).then((res) => {
                this.loading = false;
                if (res.status != 0) {
                    return;
                }
                this.$message.success("已保存");
                this.$emit("change");
                this.show = false
            });
        },

        cancleHandle: function () {
            this.$emit("cancle");
            this.show = false
        },

        deleteHandle: function () {
            this.$confirm("确定要删除这个导航按钮吗？").then(() => {
                this._deleteHandle();
            });
        },

        _deleteHandle: function () {
            this.loading = true;
            deleteNav(this.nav.id).then((res) => {
                this.loading = false;
                if (res.status != 0) {
                    return;
                }
                this.$emit("change");
            });
        },
    },
};
</script>

<style scoped></style>
